<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
	</head>
	<style type="text/css">
			.top-image-block {
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
				background: #3C3C3C;
			}
			
			.mui-bar-nav {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-ellipsis-4 {
				display: -webkit-box;
				overflow: hidden;
				white-space: normal !important;
				text-overflow: ellipsis;
				word-wrap: break-word;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
			}
			
			.comment-head-photo {
				width: 30px;
				height: 30px;
				border-radius: 30px;
			}
			
			.mui-table-view {
				position: relative;
				margin-top: 0;
				margin-bottom: 0;
				padding-left: 0;
				list-style: none;
				background-color: #EFEFF4;
			}
			
			.mui-table-view:before {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
		</style>
	<body>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">电影</h1>
		</header>
		<div class="mui-content" style="background: white;" id="content">
			<div class="top-image-block">
				<img :src="cover" style="width: 160px;height: 240px;vertical-align: top;" />
			</div>
			<div style="padding: 15px;height: 90px;">
				<div style="float: left;">
					<span class="dark-big" style="display: block;">{{title}}</span>
					<span class="gray-small">{{year}} / {{countries.toString().replace(/,/g,' / ')}} / {{genres.toString().replace(/,/g,' / ')}}</span>
					<span class="gray-small" style="display: block;">{{directors.length>0?directors[0].name:''}}导演作品</span>
				</div>
				<div style="width: 60px;height: 60px;background: white;float: right;text-align: center;box-shadow: 0px 0px 10px #aaaaaa;">
					<span class="gray-micro" style="display: block;vertical-align: middle;margin-top: 5px;line-height: 15px;">豆瓣评分</span>
					<span class="orange-big" style="display: block;line-height: 20px;" v-if="score>0">{{score}}</span>
					<span class="dark-big" style="display: block;line-height: 20px;" v-else>暂无评分</span>
					<span class="gray-micro" style="display: block;line-height: 15px;">{{ratingCount}}人</span>
				</div>
			</div>
			<div style="height: 0.5px;background: #A2A2A2;margin-left: 15px;"></div>
			<p class="gray-small" style="margin: 10px 0px 0px 15px;">剧情简介</p>
			<p class="dark-medium mui-ellipsis-4" style="margin: 0px 15px 0px 15px;">{{summary}}</p>
			<p class="gray-small" style="margin: 10px 0px 0px 15px;">演员</p>
			<div style="overflow-x: scroll;white-space: nowrap;padding-left: 15px;">
				<div v-for="item in casts" style="display: inline-block;" @click="open_detail(item)">
					<img :src="item.avatars.medium" style="width: 70px;height: 100px;margin-right: 10px;" />
					<div class="dark-micro mui-ellipsis" style="width: 70px;text-align: center;">{{item.name}}</div>
				</div>
			</div>
			<p class="dark-medium" style="margin-top: 10px;text-align: center;background: #E6E6E6;line-height: 40px;">评论</p>
			<ul class="mui-table-view" style="background: white;">
				<li class="mui-table-view-cell">
					<img src="../images/icon_commentphoto.jpg" class="comment-head-photo mui-pull-left" />
					<div>
						<span class="dark-medium" style="line-height: 30px;text-align: center;margin-left: 10px;">Kyson</span>
						<span class="gray-medium" style="line-height: 30px; text-align: center;float: right;">2018-1-1</span>
					</div>
					<p class="dark-medium" style="margin-left: 40px;">
						这部电影非常棒！
					</p>
				</li>
				<li class="mui-table-view-cell">
					<img src="../images/icon_commentphoto.jpg" class="comment-head-photo mui-pull-left" />
					<div>
						<span class="dark-medium" style="line-height: 30px;text-align: center;margin-left: 10px;">Kyson</span>
						<span class="gray-medium" style="line-height: 30px; text-align: center;float: right;">2018-1-1</span>
					</div>
					<p class="dark-medium" style="margin-left: 40px;">
						这部电影非常棒！
					</p>
				</li>
				<li class="mui-table-view-cell">
					<img src="../images/icon_commentphoto.jpg" class="comment-head-photo mui-pull-left" />
					<div>
						<span class="dark-medium" style="line-height: 30px;text-align: center;margin-left: 10px;">Kyson</span>
						<span class="gray-medium" style="line-height: 30px; text-align: center;float: right;">2018-1-1</span>
					</div>
					<p class="dark-medium" style="margin-left: 40px;">
						这部电影非常棒！
					</p>
				</li>
			</ul>
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init();
			//默认数据
			function getDefaultData(){
				return{
					title:'',
					cover:'',
					score:'',
					ratingCount:'',
					summary:'',
					countries:'',
					year:'',
					genres:'',
					casts:[],
					directors:[]
				}
			}
			//创建vue对象来渲染数据
			var data_detail = new Vue({
				el:'#content',
				data:getDefaultData(),
				methods:{
					resetData:function(){		//重置数据
						Object.assign(this.$data,getDefaultData());
					},
					open_detail:function(item){
						//打开演员详情页面
						mui.openWindow({
							id:'cast-detail',
							url:'./cast-detail.html',
							extras:{
								castId:item.id		//给cast-detail传参
							}
						});
					}
				}
			});
			//当页面离开时，清空数据并滚到最顶部
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
				//添加hide事件，清空页面数据，滚到最顶部
				self.addEventListener('hide',function(e){
					window.scrollTo(0,0);
					data_detail.resetData();
				},false);
			})
			//添加movieId自定义事件
			window.addEventListener('movieId',function(event){
				var id = event.detail.id;	//获取index页面传过来的id
				//加载框
				plus.nativeUI.showWaiting('加载中',{
					width:'100px',
					height:'100px'
				});
				//根据id请求电影详情数据
				mui.getJSON('http://api.douban.com/v2/movie/subject/'+id,function(resp){
					data_detail.title = resp.title;
					data_detail.cover = resp.images.large;
					data_detail.score = resp.rating.average;
					data_detail.ratingCount = resp.ratings_count;
					data_detail.summary = resp.summary;
					data_detail.countries = resp.countries.toString('/,/g',' / ');
					data_detail.year = resp.year;
					data_detail.genres = resp.genres.toString('/,/g',' / ');
					data_detail.casts = resp.casts;
					data_detail.directors = resp.directors;
					plus.nativeUI.closeWaiting();			//数据接受完毕后关闭加载框
				})
			});
		</script>
	</body>

</html>